<template>
  <!-- 校区服务统计模块 -->
  <el-card class="data-card" shadow="never">
    <div slot="header" class="card-header">
      <div class="header-left">
        <i class="el-icon-s-tools" />
        <span>新加盟统计(按合同日期)</span>
      </div>
      <div class="header-right">
        <el-select v-model="filterForm.brand" placeholder="请选择品牌" size="small" style="width: 120px; margin-right: 8px;" @change="handleFilterChange">
          <el-option label="全部" value="" />
          <el-option v-for="item in brandOptions" :key="item.enCode" :label="item.fullName" :value="item.enCode" />
        </el-select>
        <el-date-picker v-model="filterForm.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="small" style="width: 240px; margin-right: 8px;" @change="handleFilterChange" />
        <el-button size="small" icon="el-icon-refresh" :loading="loading" @click="refreshData">刷新</el-button>
      </div>
    </div>
    <div v-loading="loading" class="table-container">
      <!-- 服务透视表格：管理区域为列，月度为行 -->
      <el-table :data="pivotData" size="small" stripe border show-summary :summary-method="getPivotSummaries" sum-text="总计" class="report-table optimized-table">
        <el-table-column prop="month" label="月份" min-width="120" align="center" fixed="left">
          <template slot-scope="scope">
            <span class="data-primary">{{ scope.row.month }}</span>
          </template>
        </el-table-column>
        <el-table-column v-for="area in areas" :key="area.code" :prop="'area_' + area.code" :label="area.name" min-width="100" align="center">
          <template slot-scope="scope">
            <div class="area-data">
              <span class="data-warning">{{ scope.row['area_' + area.code] || 0 }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="total" label="总计" min-width="90" align="center">
          <template slot-scope="scope">
            <span class="data-info">{{ scope.row.total }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script>
import { getCampusServiceStatistics } from '@/api/report/branch'

export default {
  name: 'ServiceStatisticsReport',
  props: {
    // 管理区域选项
    managementAreaOptions: {
      type: Array,
      default: () => []
    },
    // 品牌选项
    brandOptions: {
      type: Array,
      default: () => []
    },
    // 初始筛选条件
    initialFilter: {
      type: Object,
      default: () => ({
        brand: '',
        dateRange: []
      })
    }
  },
  data() {
    // 获取当前年度时间范围
    const getCurrentYearRange = () => {
      const currentYear = new Date().getFullYear()
      const startDate = `${currentYear}-01-01`
      const endDate = `${currentYear}-12-31`
      return [startDate, endDate]
    }

    return {
      loading: false,
      serviceData: [],
      pivotData: [],
      areas: [],

      filterForm: {
        brand: '',
        dateRange: getCurrentYearRange()
      }
    }
  },
  watch: {
    initialFilter: {
      handler(newVal) {
        if (newVal) {
          // 合并初始筛选条件，但保持默认的本年度日期范围
          this.filterForm = {
            ...this.filterForm,
            ...newVal,
            // 如果initialFilter没有设置dateRange或为空，保持默认的本年度范围
            dateRange: newVal.dateRange && newVal.dateRange.length > 0 ? newVal.dateRange : this.filterForm.dateRange
          }
          this.loadServiceData()
        }
      },
      immediate: true,
      deep: true
    },

    managementAreaOptions: {
      handler() {
        if (this.managementAreaOptions.length > 0) {
          this.loadServiceData()
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.loadServiceData()
  },
  methods: {
    // 加载服务统计数据
    async loadServiceData() {
      // 防止重复加载
      if (this.loading) return

      this.loading = true

      try {
        // 构建查询参数
        const params = {}

        // 添加品牌筛选参数
        if (this.filterForm.brand && this.filterForm.brand !== '') {
          params.brand = this.filterForm.brand
        }

        // 添加时间范围参数
        if (this.filterForm.dateRange && this.filterForm.dateRange.length === 2) {
          params.startDate = this.filterForm.dateRange[0]
          params.endDate = this.filterForm.dateRange[1]
        }

        // 调用服务统计接口
        const serviceResponse = await getCampusServiceStatistics(params)

        // 处理服务数据 - 解析嵌套的数据结构
        let rawData = serviceResponse
        if (serviceResponse && serviceResponse.data) {
          // 如果返回的是标准API响应格式 {code, msg, data}
          rawData = serviceResponse.data
        }

        // 提取monthlyStatistics数据
        let monthlyData = []
        if (rawData && rawData.monthlyStatistics && Array.isArray(rawData.monthlyStatistics)) {
          monthlyData = rawData.monthlyStatistics
        } else if (Array.isArray(rawData)) {
          // 兼容直接返回数组的情况
          monthlyData = rawData
        }

        this.serviceData = this.processServiceData(monthlyData)

        // 生成服务透视表数据
        this.generateServicePivotData()

        // 通知父组件数据已更新
        this.$emit('data-updated', {
          serviceData: this.serviceData,
          pivotData: this.pivotData,
          areas: this.areas
        })
      } catch (error) {
        // 详细的错误处理
        let errorMessage = '服务统计数据加载失败'

        if (error.response) {
          // 服务器响应了错误状态码
          const status = error.response.status
          const statusText = error.response.statusText

          if (status === 404) {
            errorMessage = '服务统计接口不存在 (404)，请检查接口地址'
            console.error('API接口404错误 - 请检查后端接口是否正确部署:', {
              url: error.config && error.config.url,
              method: error.config && error.config.method,
              params: error.config && error.config.params
            })
          } else if (status === 500) {
            errorMessage = '服务器内部错误 (500)，请联系管理员'
          } else {
            errorMessage = `请求失败 (${status}): ${statusText}`
          }
        } else if (error.request) {
          // 请求已发出但没有收到响应
          errorMessage = '网络连接失败，请检查网络状态'
        } else {
          // 其他错误
          errorMessage = `请求配置错误: ${error.message}`
        }

        this.$message.error(errorMessage)
        console.error('服务统计数据加载错误:', {
          error: error,
          message: error.message,
          response: error.response,
          config: error.config
        })

        // 如果API调用失败，使用模拟数据
        this.serviceData = this.generateMockServiceData()
        this.generateServicePivotData()

        // 通知父组件数据已更新（使用模拟数据）
        this.$emit('data-updated', {
          serviceData: this.serviceData,
          pivotData: this.pivotData,
          areas: this.areas,
          isUsingMockData: true // 标识使用了模拟数据
        })
      } finally {
        this.loading = false
      }
    },

    // 处理服务数据
    processServiceData(data) {
      if (!data || !Array.isArray(data)) {
        console.warn('服务数据格式不正确:', data)
        return []
      }

      return data.map(item => {
        // 标准化月份格式
        let monthKey = item.month
        if (item.year && item.month) {
          // 确保月份为两位数格式
          const monthStr = item.month.toString().padStart(2, '0')
          monthKey = `${item.year}-${monthStr}`
        }

        return {
          ...item,
          month: monthKey, // 统一月份格式为 YYYY-MM
          monthDisplay: this.formatMonth(monthKey),
          regionName: this.getRegionName(item.managementArea || item.companyName)
        }
      })
    },

    // 生成服务透视表数据
    generateServicePivotData() {
      // 确保managementAreaOptions已加载
      if (!this.managementAreaOptions || this.managementAreaOptions.length === 0) {
        console.warn('ServiceStatisticsReport: managementAreaOptions未加载，跳过透视表生成')
        this.pivotData = []
        this.areas = []
        return
      }

      if (!this.serviceData || this.serviceData.length === 0) {
        // 即使没有数据，也要构建完整的区域列表
        this.buildAreasFromManagementOptions()
        this.pivotData = []
        return
      }

      // 构建区域列表

      // 获取所有唯一的月份
      const months = [...new Set(this.serviceData.map(item => item.month))].sort()

      // 使用完整的管理区域选项构建区域列表，而不仅仅是serviceData中的区域
      this.buildAreasFromManagementOptions()

      // 构建透视表数据
      this.pivotData = months.map(month => {
        const row = {
          month: this.formatMonth(month),
          total: 0
        }

        // 为每个区域添加数据
        this.areas.forEach(area => {
          const areaData = this.serviceData.find(item => item.month === month && item.managementArea === area.code)
          const count = areaData ? areaData.serviceCount : 0
          row[`area_${area.code}`] = count
          row.total += count
        })

        return row
      })
    },

    // 从managementAreaOptions构建完整的区域列表
    buildAreasFromManagementOptions() {
      if (!this.managementAreaOptions || this.managementAreaOptions.length === 0) {
        this.areas = []
        return
      }

      // 过滤出管理区域类型的选项（MANAGEMENT_AREA）
      const managementAreas = this.managementAreaOptions.filter(
        option => option.enabledMark === 1 // 只包含启用的区域
      )

      // 过滤出管理区域类型的选项

      // 构建区域列表
      this.areas = managementAreas.map(option => {
        return {
          code: option.enCode,
          name: option.fullName,
          sortCode: this.getRegionSort(option.enCode)
        }
      })
    },

    // 格式化月份显示
    formatMonth(month) {
      if (!month) return ''
      if (typeof month === 'string' && month.includes('-')) {
        const [year, monthNum] = month.split('-')
        return `${year}年${monthNum}月`
      }
      return month
    },

    // 获取区域名称
    getRegionName(regionCode) {
      const region = this.managementAreaOptions.find(item => item.enCode === regionCode)
      return region ? region.fullName : regionCode
    },

    // 获取区域排序值
    getRegionSort(regionCode) {
      const region = this.managementAreaOptions.find(item => item.enCode === regionCode)
      const sortCode = region ? region.sortCode || 999 : 999
      // 强制转换为数字类型
      const numericSortCode = Number(sortCode)
      // 强制转换为数字类型
      return isNaN(numericSortCode) ? 999 : numericSortCode
    },

    // 获取透视表汇总
    getPivotSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
        } else {
          sums[index] = 'N/A'
        }
      })
      return sums
    },

    // 处理筛选条件变化
    handleFilterChange() {
      this.loadServiceData()
      this.$emit('filter-change', this.filterForm)
    },

    // 刷新数据
    refreshData() {
      this.loadServiceData()
      this.$emit('refresh')
    },

    // 生成模拟服务数据（用于API失败时的回退）
    generateMockServiceData() {
      const mockData = [{ year: 2025, month: 1, monthName: '2025年1月', serviceCount: 15, managementArea: '总部区域', companyName: '总部区域' }, { year: 2025, month: 1, monthName: '2025年1月', serviceCount: 8, managementArea: '河北分公司', companyName: '河北分公司' }, { year: 2025, month: 2, monthName: '2025年2月', serviceCount: 12, managementArea: '总部区域', companyName: '总部区域' }, { year: 2025, month: 2, monthName: '2025年2月', serviceCount: 6, managementArea: '河北分公司', companyName: '河北分公司' }]

      return this.processServiceData(mockData)
    }
  }
}
</script>

<style scoped>
@import './shared-table-styles.scss';
</style>
